<template>
  <su-popup
    :show="state.show"
    @close="onCancel"
    round="20"
  >
    <view class="ui-region-picker ss-p-40 ss-p-b-100">
		<view class="font-2 font-w ss-m-b-30">{{title}}</view>
		<view class="ui-picker-body">
				<picker-view
				  :value="state.currentIndex"
				  @change="change"
				  class="ui-picker-view"
				  @pickstart="pickstart"
				  @pickend="pickend"
				>
				  <picker-view-column>
					<view
					  class="ui-column-item"
					  v-for="(item,index) in data"
					  :key="index"
					>
					  <view>{{item.name}}</view>
					</view>
				  </picker-view-column>
				</picker-view>
		</view>
		<button @tap="onConfirm" class="btn ss-m-t-30">确认修改</button>
    </view>
  </su-popup>
</template>

<script setup>
/**
 * picker picker弹出选择器
 * @property {Object} params 需要显示的参
 * @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配（默认false）
 * @property {Boolean} show-time-tag 时间模式时，是否显示后面的年月日中文提示
 * @property {String} cancel-color 取消按钮的颜色
 * @property {String} confirm-color 确认按钮的颜色
 * @property {String} confirm-text 确认按钮的文字
 * @property {String} cancel-text 取消按钮的文字
 * @property {String} default-region 默认选中的地区，
 * @property {String} default-code 默认选中的地区
 * @property {String} showDistrict-true 是否显示区域(默认为true)
 * @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker（默认true）
 * @property {String Number} z-index 弹出时的z-index值（默认1075）
 * @property {Array} default-selector 数组形式，其中每一项表示选择了range对应项中的第几个
 * @property {String} range-key 当range参数的元素为对象时，指定Object中的哪个key的值作为选择器显示内容
 * @event {Function} confirm 点击确定按钮，返回当前选择的值
 * @event {Function} cancel 点击取消按钮，返回当前选择的值
 */
import {
  computed,
  reactive,
  onMounted,
  inject,
} from 'vue';
import {
  onLoad
} from '@dcloudio/uni-app';

import {
  isEmpty
} from 'lodash';
import sheep from '@/sheep';

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title:{
    type: String,
    default: '请选择',
  },
  data:{
	  type: Array,
	  default: ()=>[],
  }
});

const state = reactive({
  currentIndex: [0],
  moving: false, // 列是否还在滑动中，微信小程序如果在滑动中就点确定，结果可能不准确
  list: [
	  {name:'上架',value:1},
	  {name:'下架',value:0},
  ],
  keywords: '',
  show:false
});

const open = async () => {
  state.show = true
  
}

const emits = defineEmits(['confirm', 'cancel', 'change']);


// 标识滑动开始，只有微信小程序才有这样的事件
const pickstart = () => {
  // #ifdef MP-WEIXIN
  state.moving = true;
  // #endif
};

// 标识滑动结束
const pickend = () => {
  // #ifdef MP-WEIXIN
  state.moving = false;
  // #endif
};
const init = () => { };

const onCancel = () => {
  state.show=false
};

// 用户更改picker的列选项
const change = (e) => {
  state.currentIndex = e.detail.value
  emits('change', state.currentIndex);
};

// 用户点击确定按钮
const onConfirm = (event = null) => {
  // #ifdef MP-WEIXIN
  if (state.moving) return;
  // #endif
  // if (event) emits(event, state.list[state.currentIndex[0]].value);
  state.show=false
  emits('confirm',props.data[state.currentIndex])
};


defineExpose({
  open,
})
onMounted(async () => {

})
</script>

<style lang="scss" scoped>
.ui-region-picker {
  position: relative;
  z-index: 999;
}

.ui-picker-view {
  height: 100%;
  box-sizing: border-box;
}

.ui-picker-header {
  width: 100%;
  height: 90rpx;
  padding: 0 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 30rpx;
  background: #fff;
  position: relative;
}

.ui-picker-header::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #eaeef1;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}

.ui-picker__title {
  color: #333;
}

.ui-picker-body {
  width: 100%;
  height: 500rpx;
  overflow: hidden;
  background-color: #fff;
}

.ui-column-item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  color: #333;
  padding: 0 8rpx;
}

.ui-btn-picker {
  padding: 16rpx;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

.ui-opacity {
  opacity: 0.5;
}

.ui-btn-picker--primary {
  color: blue;
}

.ui-btn-picker--tips {
  color: red;
}

.font-w{
		font-weight: bold;
	}
	
	.btn{
		width: 648rpx;
		height: 80rpx;
		border-radius: 20rpx;
		color:#fff;
		font-size: 32rpx;
			
		background: linear-gradient(180deg, #6AEBFF 0%, #43A7FF 53%, #346FFD 100%);
	
	}
</style>